<template>
  <div class="view-select">
    <n-card>
      <n-h2 prefix="bar">
        <n-text type="primary"> 图标选择器示例 </n-text>
      </n-h2>
      <n-space>
        <n-button
          @click="config.trigger = 'click'"
          :type="config.trigger === 'click' ? 'success' : 'default'"
          >触发方式：点击</n-button
        >
        <n-button
          @click="config.trigger = 'hover'"
          :type="config.trigger === 'hover' ? 'success' : 'default'"
          >触发方式：悬浮</n-button
        >
        <n-button
          @click="config.col = 4"
          :type="config.col === 4 ? 'success' : 'default'"
          >排列4个</n-button
        >
        <n-button
          @click="config.col = 6"
          :type="config.col === 6 ? 'success' : 'default'"
          >排列6个</n-button
        >
        <n-button
          @click="config.size = 'medium'"
          :type="config.size === 'medium' ? 'success' : 'default'"
          >size: medium</n-button
        >
        <n-button
          @click="config.size = 'small'"
          :type="config.size === 'small' ? 'success' : 'default'"
          >size: small</n-button
        >
        <n-button
          @click="config.pageSize = 16"
          :type="config.pageSize === 16 ? 'success' : 'default'"
          >一页显示16个</n-button
        >
        <n-button
          @click="config.pageSize = 20"
          :type="config.pageSize === 20 ? 'success' : 'default'"
          >一页显示20个</n-button
        >
      </n-space>
    </n-card>
    <div class="select">
      <n-card>
        <n-space>
          <pro-icon-select v-model:value="value" v-bind="config" />
          <pro-icon-select
            strong
            secondary
            type="info"
            v-model:value="value"
            v-bind="config"
          />
          <pro-icon-select v-model:value="value" v-bind="config">
            <template v-slot="{ iconName }">
              <n-button strong secondary round type="info"
                ><template #icon>
                  <icons v-if="value !== ''" :name="iconName" /> </template
                >我是插槽按钮</n-button
              >
            </template>
          </pro-icon-select>
        </n-space>
      </n-card>
    </div>
  </div>
</template>
<script lang="ts" setup name="iconSelect">
  const value = ref('')
  const config = reactive({
    trigger: 'click',
    col: 4,
    size: 'small',
    pageSize: 16
  })
</script>
<style lang="less" scoped>
  .select {
    margin-top: 20px;
  }
</style>
